<template>
    <el-row :gutter="0">
        <el-col :span="3">
            <div class="grid-content ep-bg-purple">
            </div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content ep-bg-purple">
                <div class="zong">
                    <div class="div1"><img src="../views/langxia/img/reprive.png" alt="" /></div>
                    <div class="div2">
                        <p class="p1">预定车辆</p>
                        <p class="p2">提前为您预留</p>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="2">
            <div class="grid-content ep-bg-purple1">
                <img src="../views/langxia/img/list.png" alt="" class="list" />
            </div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content ep-bg-purple">
                <div class="zong">
                    <div class="div1"><img src="../views/langxia/img/file.png" alt="" /></div>
                    <div class="div2">
                        <p class="p1">签到合同</p>
                        <p class="p2">双方共同验车</p>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="2">
            <div class="grid-content ep-bg-purple1"><img src="../views/langxia/img/list.png" alt="" /></div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content ep-bg-purple">
                <div class="zong">
                    <div class="div1"><img src="../views/langxia/img/fengjing.png" alt="" /></div>
                    <div class="div2">
                        <p class="p1">开心旅途</p>
                        <p class="p2">为您保驾护航</p>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="2">
            <div class="grid-content ep-bg-purple1"><img src="../views/langxia/img/list.png" alt="" /></div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content ep-bg-purple">
                <div class="zong">
                    <div class="div1"><img src="../views/langxia/img/huancar.png" alt="" /></div>
                    <div class="div2">
                        <p class="p1">退还车辆</p>
                        <p class="p2">提前为您预留</p>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content ep-bg-purple"></div>
        </el-col>
    </el-row>
</template>
<style lang="scss" scoped>
    .grid-content {
        margin-top:40px ;
    }
    .ep-bg-purple1{
        padding-left: 12px;
    }
.zong {
    display: flex;
   
    margin-bottom: 40px;

    .div1 {
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 100%;
        width: 60px;
        height: 60px;
        text-align: center;

        img {
            margin-top: 14px;
            width: 28px;
            height: 28px;
        }
    }

    .div2 {
        transform: scale(0.8);
        padding-left: 5px;

        .p1 {
            margin-top: 7px;
        }

        .p2 {
            margin-top: 5px;
            font-size: 14px;
            color: #999999;
        }
    }

}
</style>